<html>
<head><title></title></head>
<body onload="javascript: paintBoard();">
<canvas width="500" height ="500" id="board" onclick="javascript: clickHandler(event);"></canvas>
<script>

var xBoard = 0;
var oBoard = 0;
var begin = true;
var context;
var width, height;
var playerXO = 'X';

function paintBoard() {
   var board = document.getElementById('board');
  
   width = board.width;
   height = board.height;
   context = board.getContext('2d');

   context.beginPath();
   context.strokeStyle = '#000'; 
   context.lineWidth   = 4;

   context.moveTo((width / 3), 0);
   context.lineTo((width / 3), height);

   context.moveTo((width / 3) * 2, 0);
   context.lineTo((width / 3) * 2, height);

   context.moveTo(0, (height / 3));
   context.lineTo(width, (height / 3));

   context.moveTo(0, (height / 3) * 2);
   context.lineTo(width, (height / 3) * 2);

   context.stroke();
   context.closePath();
  
   if (begin) {
      var ini = Math.abs(Math.floor(Math.random() * 9 - 0.1));
      markBit(1 << ini, 'O');
      begin = false;
   } else {
      begin = true;
   }   
}

function checkWinner(board) {

   var result = false;

   if (((board | 0x1C0) == board) || ((board | 0x38 ) == board) || 
	((board | 0x7) == board) || ((board | 0x124) == board) || 
	((board | 0x92) == board) || ((board | 0x49) == board) || 
	((board | 0x111) == board) || ((board | 0x54) == board)) {  

	result = true;
   } 
   return result;
}

function paintX(x, y) {

   context.beginPath();

   context.strokeStyle = '#ff0000'; 
   context.lineWidth   = 4;

   var offsetX = (width / 3) * 0.1;
   var offsetY = (height / 3) * 0.1;

   var beginX = x * (width / 3) + offsetX;
   var beginY = y * (height / 3) + offsetY;

   var endX = (x + 1) * (width / 3) - offsetX * 2;
   var endY = (y + 1) * (height / 3) - offsetY * 2;

   context.moveTo(beginX, beginY);
   context.lineTo(endX, endY); 

   context.moveTo(beginX, endY);
   context.lineTo(endX, beginY); 	

   context.stroke();
   context.closePath(); 
}

function paintO(x, y) {
	
   context.beginPath();

   context.strokeStyle = '#0000ff'; 
   context.lineWidth   = 4;

   var offsetX = (width / 3) * 0.1;
   var offsetY = (height / 3) * 0.1;

   var beginX = x * (width / 3) + offsetX;
   var beginY = y * (height / 3) + offsetY;

   var endX = (x + 1) * (width / 3) - offsetX * 2;
   var endY = (y + 1) * (height / 3) - offsetY * 2;

   context.arc(beginX + ((endX - beginX) / 2), beginY + ((endY - beginY) / 2), (endX - beginX) / 2 , 0, Math.PI * 2, true);

   context.stroke();
   context.closePath();
}

function clickHandler(e) {

    var y = Math.floor(e.clientY / (height / 3));    
    var x =  Math.floor(e.clientX / (width/ 3)); 
	//alert(e.pageX + " " + e.pageY);

    var bit =  (1 << x + ( y * 3 ));
	alert (e.clientY + " " + e.clientX + " " +x + " " + y + " " +bit);

    if (isEmpty(xBoard, oBoard, bit)) {

		markBit(bit, playerXO);
		if (playerXO == 'X'){
			playerXO = 'O';
		}else{
			playerXO = 'X';
		}

        if (!checkNobody())  {
		if (checkWinner(xBoard)) {

		    alert('here X win!!');
		    restart();

		} 
		if (!checkNobody()) {
		     
		       if (checkWinner(oBoard)) {
			   alert('here O win!!');
			   restart();
		       }
		}
	 	
	    }	
    }
}

function checkNobody(){
   if ((xBoard | oBoard) == 0x1FF) {
		if(checkWinner(xBoard)){
			alert('checknobody X win');
			return true;
		}
		else if(checkWinner(oBoard)){
			alert('checknobody O win');
			return true;
		}else{
       alert('Nobody won!!');
       restart();
       return true;
	   }
   }
   return false;
}

function restart() {
   context.clearRect (0, 0, width , height);
   xBoard = 0;
   oBoard = 0;
   paintBoard();
}

function isEmpty(xBoard, oBoard, bit) {
   return (((xBoard & bit) == 0) && ((oBoard & bit) == 0));
}



function markBit(markBit, player) {
   
   var bit = 1;
   var posX = 0, posY = 0;
   
   while ((markBit & bit) == 0) {
	bit = bit << 1;
        posX++;
	if (posX > 2) {
            posX = 0;
            posY++;
        }
   }
   
    if (player == 'O') { 
        oBoard = oBoard | bit;
	paintO(posX, posY);
    } else {
        xBoard = xBoard | bit;
	paintX(posX, posY);
    }
}


</script>
</body>
</html>
